<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>修改密码</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/motifyPass.css">
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创OCP</span>
            </p>
            <p>
                <span>全渠道数字平台</span>
            </p>
        </div>
        <div id="exit">
            <!-- 下拉餐单 -->
            <div style=" position: absolute;top: 0px;right: 30px;">
            <el-dropdown>
                <span class="el-dropdown-link" style="color: white;">
                  <i class="el-icon-user-solid">admin</i>
                </span>
                <!-- 后续连数据库 -->
                <el-dropdown-menu trigger="click">
                    <el-dropdown-item>水热事业部</el-dropdown-item>
                    <el-dropdown-item>厨电事业部</el-dropdown-item>
                    <el-dropdown-item>热能事业部</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
            <el-link icon="el-icon-switch-button" style="color: white; position: absolute;top: 10px;right:3px" href="http://localhost:8088/login" ></el-link>
        </div>
    </div>
    <!-- 中间部分-->
    <div id="nav">
        <!-- 上方导航栏 -->
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="homepage">首页</el-menu-item>
            <el-menu-item index="2" @click="subAccount">子账号管理</el-menu-item><!--后续修改-->
            <el-menu-item index="3" @click="AccountMeaasge">账户信息</el-menu-item>
            <el-menu-item index="4"  @click="motifyPass">修改密码 </el-menu-item>
            <el-menu-item index="5" @click="information">会员信息 </el-menu-item>
        </el-menu>
        <!--表单-&#45;&#45;修改密码部分-->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原密码：" prop="formerpass"  :required="true">
            <el-input type="password" v-model="ruleForm.formerpass" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="pass"  :required="true">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="true" clearable></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="checkPass"  :required="true">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="submitForm('ruleForm')" round style="width: 150px">提交</el-button>
                <el-button @click="resetForm('ruleForm')" round style="width: 150px;border: coral 1px solid">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 侧边导航栏 -->
    <div id="left">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title" class="el-submenu_title">
                    <span>订单管理</span>
                </template>

                    <el-menu-item index="1-1">提交订单</el-menu-item>
                    <el-menu-item index="1-2">待处理订单</el-menu-item>
                    <el-menu-item index="1-3">采购订单</el-menu-item>
                    <el-menu-item index="1-4">零售订单列表</el-menu-item>

            </el-submenu>
            <el-submenu index="2">
                <template slot="title" class="el-submenu_title">
                    <span>售后管理</span>
                </template>

                    <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
                    <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>

            </el-submenu>
            <el-submenu index="3">
                <template slot="title" class="el-submenu_title">
                    <span>产品管理</span>
                </template>

                    <el-menu-item index="3-1">产品信息查询</el-menu-item>
                    <el-menu-item index="3-2">库存信息管理</el-menu-item>

            </el-submenu>
            <el-submenu index="4">
                <template slot="title" class="el-submenu_title">
                    <span>会员信息</span>
                </template>

                <el-menu-item index="4-1" @click="information">会员信息</el-menu-item>
                <el-menu-item index="4-2" @click="motifyPass">修改密码</el-menu-item>
                <el-menu-item index="4-3" @click="AccountMeaasge">账号信息</el-menu-item>
                <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>

            </el-submenu>
            <el-submenu index="5" >
                <template slot="title" class="el-submenu_title">
                    <span>设置</span>
                </template>

                    <el-menu-item index="5-1">网店设置</el-menu-item>

            </el-submenu>
        </el-menu>
    </div>
</div>
</body>
<script type="module" >
    import myajax from "./js/axios_motifypass.js"
    var path=decodeURI(location.href);
    //返回某个指定的字符串值首次出现的位置
    var num=path.indexOf("?");
    var str=path.substr(num+1);
    //$("#loginId").html(str);
    let vm=new Vue({
        el: '#app',
        data() {
            var validatePass1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原密码'));
                }  else {

                    this.passwords.oldPassword=value;
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                   this.passwords.newPassword=value;
                   callback();
                }
            };
            return {

                activeIndex2: '4',
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    formerpass: '',
                },
                passwords:{
                    oldPassword: '',
                    newPassword: '',
                },
                rules: {
                    formerpass: [
                        {validator: validatePass1, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass3, trigger: 'blur'}
                    ],

                }
            };
        },
        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                         myajax("/system/account/update", this.passwords);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //跳转
            information(){
                location.href="http://localhost:8088/information?"+str;
            },
            motifyPass(){
                location.href="http://localhost:8088/motifypass?"+str;
            },
            AccountMeaasge()
            {
                location.href="http://localhost:8088/AccountMeaasge?"+str;
            },
            homepage(){
                location.href="http://localhost:8088/homepage?"+str;
            },
        }
    });
    function exit () {
        location.assign("http://localhost:8088/login1");

    }
</script>
</html>
